<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 全局去掉p的间距 */
        *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
      .column {
        display: flex;
        flex-direction: column;
      }
     .column1{
        align-items: start;
        flex-direction: column;
      }
      .row {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        margin-bottom: 20px;
      }
      .row1{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
      }
      .row2{
        box-sizing: border-box;
        display: flex;
       padding: 10px;
       justify-content: space-between;
       align-items: center;
      }
      .row3{
        display: flex;
        flex-direction: row;
      }
      .img {
        width: 24px;
        height: 24px;
      }
      .img1 {
        width: 100vw;
        height: 80vw;
        margin-bottom: 20px;
      }
      .img2{
        width: 50px;
        height: 50px;
        margin-right: 5px;
      }
      .font1 {
        font-size: 17px;
      }
      .font2 {
        font-size: 15px;
        color: #6cc5c8;
      }
     
      .font3 {
        font-size: 18px;
        color: #45b9ba;
      }
      .font4{
        font-size: 16px;
      }
      .font5{
        font-size: 14px;
        color:#A39A8F ;
      }
      .border{
        border: 1px solid #E2E2E2;
        margin-left: 10px;
        margin-right: 10px;
      
      }
    </style>
  </head>
  <body>
    <div class="column">
      <div class="row">
        <img src="./images/arrow-left.png" class="img" />
        <h3 class="font1">急速问诊</h3>
        <h6 class="font2">问诊记录</h6>
      </div>
      <img src="./images//consult-fast.png" class="img1" />
      <div class="row1">
        <p style="color:#45b9ba;font-weight: 700;">20s<strong style="color: #000000;font-size:18px;">快速匹配专业医生</strong></p>
        <!-- <p class="font3"><strong>20s</strong></p>
        <h3>快速匹配专业医生</h3> -->
    </div>
    <p class="border"></p>
    <div class="row2">
      <div class="row3">
        <img src="./images/doctor.png" class="img2" >
        <div class="column1">
          <p class="font4">三甲图文问诊</p>
          <p class="font5">三甲主治及以上级别医生</p>
        </div>
      </div>
      <img src="./images/arrow-right.png" class="img">
    </div>
    <p class="border"></p>
    <div class="row2">
      <div class="row3">
        <img src="./images/message.png" class="img2" >
        <div class="column1">
          <p class="font4">普通图文问诊</p>
          <p class="font5">二甲主治及以上级别医生</p>
        </div>
      </div>
      <img src="./images/arrow-right.png" class="img">
    </div>
  </body>
</html>
